<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>部门列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css(t=2)}" media="all">
    <link rel="stylesheet" th:href="@{/febs/css/febs.css(t=2)}" media="all">
    <link rel="stylesheet" th:href="@{/febs/css/login.css(t=2)}" media="all">
    <link rel="icon" th:href="@{/febs/images/favicon.ico}" type="image/x-icon"/>
    <style>
        body{
            background-image: url("/images/futa.png");
            background-size: 100% 100%;
            color: #ffffff;
            font-size: 30px;
            height: 100%}
        .header{
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            height: 10%;

        }
        .content{
            height: 90%;
            padding-top: 20px;
        }
        .layui-breadcrumb a{color: #ffffff;font-size: 30px}
        .content .layui-card .layui-card-header{font-size: 20px; text-align: center;}
        .content .layui-card .layui-card-body{font-size: 18px; height: 700px; overflow-y: auto;}
        .policy-list{background-image: url("/images/policy-list.png");background-size: 100% 100%;height: 15%}
        .ploicy-header{height: 60%;margin-left: 30px;}
        .ploicy-header label{font-size: 20px;font-weight: bold;padding-top: 20px;}
        .ploicy-header p{font-size: 16px;width: 98%}
        .ploicy-header span{float: right;margin-right: 20px}
        .ploicy-footer{height: 40%;text-align: center;}
    </style>
</head>
<body>

<div class="layui-bg-orange header" >
    <div class="layui-col-md6">
        <span class="layui-breadcrumb" lay-separator="—">
        <a href="" ><i class="layui-icon" style="font-size: 30px">&#xe68e;</i>首页</a>
        <a href="javascript:history.go(-1);" >部门列表</a>
        <a><cite>政策列表</cite></a>
        </span>
    </div>
    <div class="layui-col-md3 layui-col-md-offset3">
        <span class="layui-breadcrumb" lay-separator="—">
        <a href="javascript:history.go(-1);" style="float: right"><i class="layui-icon"style="font-size: 30px" >&#xe65a;</i>返回</a>
        </span>
    </div>

</div>
<div class="layui-container content">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header" >
                <i class="layui-icon layui-icon-list" style="font-size: 30px; color: #00a0e9;"></i>
                政策列表
            </div>
            <div class="layui-card-body">
                <div title="点击查看附件内容" th:id="'policy'+${policy.id}" th:each=" policy : ${policyList}" class="policy-list">
                    <div class="ploicy-header">
                        <img src="/images/icon.png"/>
                        <label th:text="${policy.title}">这里是政策标题</label>
                        <span th:text="${#dates.format(policy.publishTime, 'yyyy-MM-dd')}">2020-11-12</span>
                        <p th:text="${policy.content}">这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容
                            这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容这里是政策内容</p>

                    </div>
                    <div class="ploicy-footer">
                        <i class="layui-icon layui-icon-location" style="font-size: 20px; color: #00a0e9;"></i>
                        <label th:text="${dept.deptName}">xxx局</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    var policyList = [[${policyList}]];
    layui.use(['element','layer','jquery'], function(){
        var element = layui.element,
            layer = layui.layer,
            $ = layui.jquery;

        $.each(policyList,function(index,item){
            $('#policy'+item.id).click(function () {

                layer.open({
                    type: 2,
                    title: '政策详情',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['60%', '100%'],
                    content: '/tFile/preFile/'+item.id
                });
            })
        })
    });

</script>
</body>
</html>

